<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="/webjars/jquery/3.6.0/jquery.js"></script>
    <script src="/js/js.cookie.min.js"></script>
    <style>
        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<h3>登录页面</h3>
<form id="loginForm">
    用户名：<input type="text" name="name" id="name"> <br/>
    密  码：<input type="password" name="pwd" id="pwd"> <br/>
    <div id="errorMessage" class="error"></div>
    <input type="button" id="loginBtn" value="登录">
</form>

<script>
    $(function(){
        $("#loginBtn").on("click",function(){
            // 清除之前的错误信息
            $("#errorMessage").text("");

            $.ajax({
                url:"/app/login",
                type:"post",
                data: {
                    name: $("#name").val(),
                    pwd: $("#pwd").val()
                },
                dataType:"json",
                success:function(resp){
                    if(resp.code == 0){
                        // 登录成功
                        Cookies.set("accessToken", resp.data);
                        alert("登录成功");
                        window.location.href = "/html/main.html";
                    } else {
                        // 登录失败
                        $("#errorMessage").text(resp.msg);
                    }
                },
                error: function() {
                    // 请求失败
                    $("#errorMessage").text("用户名或密码错误");
                }
            })
        })
    })
</script>
</body>
</html>
